<template>
  <div class="select-single">
    <el-input v-model="filterValue" :class="['select-text', showOption?'up-icon':'down-icon']" suffix-icon="el-icon-arrow-down" :placeholder="placeholder" @focus="filterValue=null;showOption=true" />
    <div v-if="showOption" class="option-text">
      <div class="option">
        <node-select-single
          v-for="(item,index) in dataRootNode"
          :key="index"
          :node="item"
          :data="filtedData"
          :tree-template="treeTemplate"
          :expand="expanded"
          :show-icon="showIcon"
          @click="nodeClick"
          @dblclick="nodeClick"
          @contextmenu="$emit('contextmenu',$event)"
        />
      </div>
      <div v-if="showFooter" class="list-footer">
        <el-button size="mini" @click="expanded=true">全部展开</el-button>
        <el-button size="mini" @click="expanded=false">全部收起</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { getRoot, filterBranch } from '@service/utilTool.js'
export default {
  name: 'SelectSingle',
  components: {
    NodeSelectSingle: () => import('@components/NodeSelectSingle.vue')
  },
  props: {
    data: { // tree list data set
      type: Array,
      required: true,
      default: () => []
    },
    treeTemplate: { // tree node display props
      type: Object,
      required: false,
      default: () => ({
        label: 'name',
        key: 'uid',
        item: 'item_uid',
        parent: 'parent_uid'
      })
    },
    expand: { // flag of tree expand;false: default,shrinked;true: expanded
      type: Boolean,
      required: false,
      default: false
    },
    showIcon: { // flag of show data icon(item.info.icon)
      type: Boolean,
      required: false,
      default: false
    },
    showFooter: { // flag of footer display;true: default,show;false: hide
      type: Boolean,
      required: false,
      default: true
    },
    filter: { // filter condition
      type: String,
      required: false,
      default: null
    },
    placeholder: { // filter placeholder
      type: String,
      required: false,
      default: '输入关键字'
    }
  },
  data() {
    return {
      filterValue: this.filter,
      expanded: this.expand,
      showOption: false
    }
  },
  computed: {
    filtedData() {
      return filterBranch(this.data, this.filterValue, this.treeTemplate)
    },
    dataRootNode() {
      return getRoot(this.filtedData, this.treeTemplate)
    }
  },
  created() {
    document.addEventListener('click', (e) => {
      if (!this.$el.contains(e.target)) {
        this.showOption = false
      }
    })
  },
  methods: {
    nodeClick(data, event) {
      this.showOption = false
      this.filterValue = data[this.treeTemplate.label]
      this.$emit('change', data, event)
    }
  }
}
</script>
<style scoped>
.select-single {
  position: relative;
}
.up-icon /deep/ .el-icon-arrow-down {
    transform: rotate(180deg);
}
.down-icon /deep/ .el-icon-arrow-down {
    transform: rotate(0deg);
}
.option-text {
  min-width: 100%;
  transform-origin: center top 0px;
  z-index: 2;
  top: 3rem;
  left: 0;
  position: absolute;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  box-sizing: border-box;
  margin-top: 1rem;
  margin-bottom: .5rem;
}
.option-text::after,
.option-text::before {
  display: block;
  position: absolute;
  content: '';
  left: 35px;
  border: 6px solid transparent;
  border-top-width: 0;
}
.option-text::after {
  top: -6px;
  border-bottom-color: #ebeef5;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.03));
  z-index: 3;
}
.option-text::before {
  top: -5px;
  border-bottom-color: #fff;
  z-index: 4;
}
.option {
  max-height: 20rem;
  margin: .5rem .1rem;
  overflow: auto;
}
.option::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.option::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(144,147,153,.3);
}
.list-footer {
  display: flex;
  justify-content: space-around;
  padding-bottom: .5rem;
}
</style>
